<template>
	<view class="yg-gd">
		<view class="yg-gd-content">
			<!-- 轮播 -->
			<view class="yg-gd-swiper">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in goodInfo.pics" :key="item.pics_id" @click="showPics(index)">
						<image :src="item.pics_mid"></image>
					</swiper-item>
				</swiper>
			</view>
			<!--  价格区域开始 -->
			<view class="yg-gd-price">
				<view class="gd-price-left">
					￥{{goodInfo&&goodInfo.goods_price}}
				</view>
				<view class="gd-price-right">
					<view class="share">
						<view class="iconfont icon-fenxiang">
						</view>
						<button type="default" open-type="share" size="mini"></button>
					</view>
					<view class="collect" @click="handleCollect">
						<view :class="['iconfont', isgood?'icon-shoucang_gaoliang':'icon-shoucang']">
						</view>
					</view>
				</view>
			</view>
			<!-- 商品详情标题开始 -->
			<view class="yg-gd-title">
				{{goodInfo.goods_name}}
			</view>
			<!-- 图文详情 -->
			<view class="yg-gd-rtext">
				<view class="title">
				</view>
				<rich-text :nodes="goodInfo.goods_introduce"></rich-text>

			</view>
			
		</view>
		<!-- 底部 -->
		<view class="yg-gd-tabbar">
			<view class="gd-tabbar-item">
				<view class="iconfont icon-lianxikefu">
				</view>
				<view class="tabbar-item-text">
					联系客服
				</view>
				<button type="default" open-type="contact"></button>
			</view>
			<navigator  url="../cart/cart"  open-type="switchTab"   class="gd-tabbar-item" >
				<view class="iconfont icon-gouwuche">
		
				</view>
				<view class="tabbar-item-text">
					购物车
				</view>
			</navigator>
			<view class="gd-tabbar-item" @click="addToCart">
				<view class="tabbar-item-btn">
					加入购物车
				</view>
			</view>
			<navigator  url="../order/order" class="gd-tabbar-item" >
				<view class="tabbar-item-pay">
					立即购买
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodInfo: [

				],
				isgood: false,
				goods_id:0

			};
		},
		onShow() {
			let collect = uni.getStorageSync("collect") || [];
			let index = collect.findIndex(v => v.goods_id === parseInt(this.goods_id))
			if (index != -1) {
		
				this.isgood = true
			}
		},
		async onLoad(option) {
			const {
				goods_id
			} = option
			this.goods_id = goods_id
			const res = await this.$request({
				url: 'goods/detail',
				data: {
					goods_id,

				}
			})
			this.goodInfo = res.message

		},
		methods: {
			showPics: function(index) {
				let urls = this.goodInfo.pics.map(v => v.pics_mid)
				uni.previewImage({
					urls: urls,
					current: index
				})

			},
			
			handleCollect: function() {
				let collect = uni.getStorageSync("collect") || [];
				let index = collect.findIndex(v => v.goods_id === this.goodInfo.goods_id)
				if (index === -1) {
					collect.push(this.goodInfo)
					uni.showToast({
						title: '添加收藏成功'
					})
					this.isgood=true
				} else {

					this.isgood = false
					collect.splice(index, 1)
					uni.showToast({
						title: '取消收藏成功'
					})
				}
				uni.setStorageSync('collect', collect)
			},
			addToCart:function(){
				let carts=uni.getStorageSync("carts")||[]
				let index=carts.findIndex(item=>item.goods_id===this.goodInfo.goods_id)
				if(index===-1){
					
					
				let getInfo=JSON.parse(JSON.stringify(this.goodInfo))
				getInfo.num=1
				getInfo.check=true
				carts.push(getInfo)
					uni.showToast({
						title:'加入成功'
					})
				}else{
					let getInfo=carts[index]
					
			if(getInfo.num+1<this.goodInfo.goods_number){
				   getInfo.num+=1
				   carts[index]=getInfo
			}
				}
				uni.setStorageSync('carts',carts)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yg-gd {
		.yg-gd-content {
			height: calc(100vh - 100rpx);
			overflow-y: scroll;

			.yg-gd-swiper {
				height: 500rpx;

				swiper {
					height: 500rpx;

					swiper-item {
						display: flex;
						align-items: center;
						justify-content: center;


					}
				}
			}
		}

		.yg-gd-price {
			height: 60rpx;
			padding: 2rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.gd-price-left {
				color: #ec5763;
			}

			.gd-price-right {
				display: flex;

				.share {
					position: relative;
					margin-right: 40rpx;

					button {
						opacity: 0;
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
					}
				}

				.collect {
					margin-right: 20rpx;

					.icon-shoucang {}

					.icon-shoucang_gaoliang {
						color: red;
					}
				}
			}
		}

		.yg-gd-title {
			padding: 5rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.yg-gd-rtext {
			.title {
				text-align: center;
			}
		}

		.yg-gd-tabbar {
			height: 100rpx;
			display: flex;

			.gd-tabbar-item:nth-child(1) {
				flex: 1;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.iconfont {}

				.tabbar-item-text {
					font-size: 20rpx;
				}

				button {
					position: absolute;
					opacity: 0;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}

			.gd-tabbar-item:nth-child(2) {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.iconfont {}

				.tabbar-item-text {
					font-size: 20rpx;
				}
			}

			.gd-tabbar-item:nth-child(3) {
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabbar-item-btn {
					height: 60rpx;
					width: 196rpx;
					border-radius: 30rpx;
					background-color: #fcaa23;
					color: white;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.gd-tabbar-item:nth-child(4) {
				flex: 2;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabbar-item-pay {
					height: 60rpx;
					width: 196rpx;
					border-radius: 30rpx;
					background-color: #ea4350;
					color: white;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

		}
	}
</style>
